<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>闪电秒杀-我的订单</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/myOrder.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.css">
    <script src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>
    <script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.js"></script>
</head>

<body style="background-color: #e3e4e55e;">

<!-- 1.顶部横条 -->
<div class="top">
    <div class="nav">
        <!-- (1).logo -->
        <div class="logo">
            <a href="${pageContext.request.contextPath}/index.jsp"><img src="${pageContext.request.contextPath}/images/shandianmiaosha_logo.png" alt="" class="logoimg"></a>
        </div>

        <div class="nav_r">
            <!-- (2).搜索框 -->
            <div class="search">
                <div class="search_form">
                    <input type="text" class="text">
                    <a href=""><button>搜索</button></a>
                </div>
            </div>

            <!-- (3).我的购物车 -->
            <div class="dropdown">
                <i><img src="${pageContext.request.contextPath}/images/sd_shopcar.png" alt=""></i>
                <a href="${pageContext.request.contextPath}/personal/myShopcar.jsp">我的购物车</a>
            </div>
        </div>

    </div>
</div>

<!-- 2.主体内容 -->
<div class="contain">

    <!-- (1).侧边目录条 -->
    <div class="sub">
        <div class="menu">
            <dl>
                <dt class="ordercenter">订单中心</dt>
                <a class="wodedingdan" href=""><dd class="ydingdan">我的订单</dd></a>
                <a href="${pageContext.request.contextPath}/personal/myEvaluation.html"><dd>我的评价</dd></a>
            </dl>

            <dl>
                <dt class="ordercenter">我的钱包</dt>
                <a href="${pageContext.request.contextPath}/personal/myCoupon.jsp"><dd>优惠券</dd></a>
                <a href="${pageContext.request.contextPath}/personal/person.jsp"><dd>积分</dd></a>
            </dl>

            <dl>
                <dt class="ordercenter">我的关注</dt>
                <a href=""><dd>关注商品</dd></a>
                <a href=""><dd>关注店铺</dd></a>
            </dl>
        </div>
    </div>

    <!-- (2).我的订单横条 -->
    <div class="title">
        <span class="myOrder">我的订单</span>
    </div>

    <!-- (3).订单列表 -->
    <div class="content">

        <!-- 选项卡 -->
        <div>
            <ul class="nav nav-tabs">
                <li class="active"><a href="#d1" data-toggle="tab">全部订单</a></li>
                <li><a href="#d2"  data-toggle="tab">待付款</a></li>
                <li><a href="#d3"  data-toggle="tab">已取消</a></li>
                <li><a href="#d4"  data-toggle="tab">待评价</a></li>
            </ul>

            <div class="tab-content">

                <!-- 一、全部订单页面 -->
                <div id="d1" class="tab-pane active">

                    <!-- 1.表头  -->
                    <div class="cart-head">
                        <div class="msg"><span>订单详情</span></div>
                        <div class="addressee"><span>收货人</span></div>
                        <div class="price"><span>金额</span></div>
                        <div class="state"><span>状态</span></div>
                        <div class="operate"><span>操作</span></div>
                    </div>

                    <!-- 2.订单列表 -->
                    <div class="pro-list">
                        <ul class="myul">
                            <c:forEach var="order" items="${result}">
                                <li class="pro">

                                    <!-- 灰条 -->
                                    <div class="hui">
                                        <!-- 下单时间 -->
                                        <p class="date">${order.get("下单时间")}</p>

                                        <!-- 订单号 -->
                                        <span class="dingdanhao">订单号：</span>
                                        <span class="no">${order.get("订单号")}</span>
                                    </div>

                                    <!-- (2).商品图片 -->
                                    <a href="../product_show/detail.html"><img src="${pageContext.request.contextPath}/${order.get("商品主图片")}" style="height: 85px; width:85px; margin-top: 15px; margin-left: -130px; float: left;"></a>

                                    <!-- (3).商品名字 -->
                                    <div class="name">
                                        <a href="../product_show/detail.html"><p>${order.get("商品名称")}
                                        </p></a>
                                        <span class="count">共${order.get("共几单")}单></span>
                                    </div>

                                    <!--(4).收货人 -->
                                    <div class="people">
                                        <span class="name">${order.get("收件人")}</span>
                                    </div>

                                    <!-- (5).金额 -->
                                    <div class="pro-xiaoji">
                                        <span>￥</span>
                                        <span>${order.get("订单金额")}</span>
                                    </div>

                                    <!-- (6).订单状态 -->
                                    <div class="zhuangtai">
                                        <span class="staue">${order.get("订单状态")}</span>
                                        <span hidden class="name">${order.get("地址id")}</span>
                                        <span hidden class="proid">${order.get("订单id")}</span>
                                    </div>

                                    <!-- (7).操作 -->
                                    <div class="pro-caozuo">
                                    </div>
                                </li>
                            </c:forEach>
                        </ul>
                    </div>

                </div>

                <!-- 二、待付款页面 -->
                <div id="d2"  class="tab-pane">

                    <!-- 1.表头  -->
                    <div class="cart-head">
                        <div class="msg"><span>订单详情</span></div>
                        <div class="addressee"><span>收货人</span></div>
                        <div class="price"><span>金额</span></div>
                        <div class="state"><span>状态</span></div>
                        <div class="operate"><span>操作</span></div>
                    </div>

                    <!-- 2.订单列表 -->
                    <div class="pro-list">
                        <ul class="myul">
                            <c:forEach var="order" items="${result}">
                                <c:if test="${order.get('订单状态') == '待付款'}">
                                    <li class="pro">
                                    <!-- 灰条 -->
                                    <div class="hui">
                                        <!-- 下单时间 -->
                                        <p class="date">${order.get("下单时间")}</p>

                                        <!-- 订单号 -->
                                        <span class="dingdanhao">订单号：</span>
                                        <span class="no">${order.get("订单号")}</span>
                                    </div>

                                    <!-- (2).商品图片 -->
                                    <a href="../product_show/detail.html"><img src="${pageContext.request.contextPath}/${order.get("商品主图片")}" style="height: 85px; width:85px; margin-top: 15px; margin-left: -130px; float: left;"></a>

                                    <!-- (3).商品名字 -->
                                    <div class="name">
                                        <a href="../product_show/detail.html"><p>${order.get("商品名称")}
                                        </p></a>
                                        <span class="count">共${order.get("共几单")}单></span>
                                    </div>

                                    <!--(4).收货人 -->
                                    <div class="people">
                                        <span class="name">${order.get("收件人")}</span>
                                    </div>

                                    <!-- (5).金额 -->
                                    <div class="pro-xiaoji">
                                        <span>￥</span>
                                        <span>${order.get("订单金额")}</span>
                                    </div>

                                    <!-- (6).订单状态 -->
                                    <div class="zhuangtai">
                                        <span class="staue">${order.get("订单状态")}</span>
                                        <span hidden class="name">${order.get("地址id")}</span>
                                        <span hidden class="proid">${order.get("订单id")}</span>
                                    </div>

                                    <!-- (7).操作 -->
                                    <div class="pro-caozuo">
                                    </div>
                                </li>
                                </c:if>
                            </c:forEach>
                        </ul>
                    </div>

                </div>

                <!-- 三、已取消页面 -->
                <div id="d3"  class="tab-pane">

                    <!-- 1.表头  -->
                    <div class="cart-head">
                        <div class="msg"><span>订单详情</span></div>
                        <div class="addressee"><span>收货人</span></div>
                        <div class="price"><span>金额</span></div>
                        <div class="state"><span>状态</span></div>
                        <div class="operate"><span>操作</span></div>
                    </div>

                    <!-- 2.订单列表 -->
                    <div class="pro-list">
                        <ul class="myul">
                            <c:forEach var="order" items="${result}">
                                <c:if test="${order.get('订单状态') == '已取消'}">
                                   <li class="pro">
                                        <!-- 灰条 -->
                                        <div class="hui">
                                            <!-- 下单时间 -->
                                            <p class="date">${order.get("下单时间")}</p>

                                            <!-- 订单号 -->
                                            <span class="dingdanhao">订单号：</span>
                                            <span class="no">${order.get("订单号")}</span>
                                        </div>

                                        <!-- (2).商品图片 -->
                                        <a href="../product_show/detail.html"><img src="${pageContext.request.contextPath}/${order.get("商品主图片")}" style="height: 85px; width:85px; margin-top: 15px; margin-left: -130px; float: left;"></a>

                                        <!-- (3).商品名字 -->
                                        <div class="name">
                                            <a href="../product_show/detail.html"><p>${order.get("商品名称")}
                                            </p></a>
                                            <span class="count">共${order.get("共几单")}单></span>
                                        </div>

                                        <!--(4).收货人 -->
                                        <div class="people">
                                            <span class="name">${order.get("收件人")}</span>
                                        </div>

                                        <!-- (5).金额 -->
                                        <div class="pro-xiaoji">
                                            <span>￥</span>
                                            <span>${order.get("订单金额")}</span>
                                        </div>

                                        <!-- (6).订单状态 -->
                                        <div class="zhuangtai">
                                            <span class="staue">${order.get("订单状态")}</span>
                                            <span hidden class="name">${order.get("地址id")}</span>
                                            <span hidden class="proid">${order.get("订单id")}</span>
                                        </div>

                                        <!-- (7).操作 -->
                                        <div class="pro-caozuo">
                                        </div>
                                    </li>
                                </c:if>
                            </c:forEach>
                        </ul>
                    </div>

                </div>

                <!-- 四、待评价页面 -->
                <div id="d4"  class="tab-pane">

                    <!-- 1.表头  -->
                    <div class="cart-head">
                        <div class="msg"><span>订单详情</span></div>
                        <div class="addressee"><span>收货人</span></div>
                        <div class="price"><span>金额</span></div>
                        <div class="state"><span>状态</span></div>
                        <div class="operate"><span>操作</span></div>
                    </div>

                    <!-- 2.订单列表 -->
                    <div class="pro-list">
                        <ul class="myul">
                            <c:forEach var="order" items="${result}">
                                <c:if test="${order.get('订单状态') == '已完成'}">
                                    <li class="pro">
                                        <!-- 灰条 -->
                                        <div class="hui">
                                            <!-- 下单时间 -->
                                            <p class="date">${order.get("下单时间")}</p>

                                            <!-- 订单号 -->
                                            <span class="dingdanhao">订单号：</span>
                                            <span class="no">${order.get("订单号")}</span>
                                        </div>

                                        <!-- (2).商品图片 -->
                                        <a href="../product_show/detail.html"><img src="${pageContext.request.contextPath}/${order.get("商品主图片")}" style="width: 85px;height: 85px; margin-top: 15px; margin-left: -130px; float: left;"></a>

                                        <!-- (3).商品名字 -->
                                        <div class="name">
                                            <a href="../product_show/detail.html"><p>${order.get("商品名称")}
                                            </p></a>
                                            <span class="count">共${order.get("共几单")}单></span>
                                        </div>

                                        <!--(4).收货人 -->
                                        <div class="people">
                                            <span class="name">${order.get("收件人")}</span>
                                        </div>

                                        <!-- (5).金额 -->
                                        <div class="pro-xiaoji">
                                            <span>￥</span>
                                            <span>${order.get("订单金额")}</span>
                                        </div>

                                        <!-- (6).订单状态 -->
                                        <div class="zhuangtai">
                                            <span class="staue">${order.get("订单状态")}</span>
                                            <span hidden class="name">${order.get("地址id")}</span>
                                            <span hidden class="proid">${order.get("订单id")}</span>
                                        </div>

                                        <!-- (7).操作 -->

                                        <div class="pro-caozuo">
                                        </div>


                                    </li>
                                </c:if>
                            </c:forEach>
                        </ul>
                    </div>

                </div>

                <!-- 删除模态框 -->
                <div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header h">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                <h4 class="modal-title" class="myModalLabel">提示</h4>
                            </div>
                            <div class="modal-body o"><p style="font-size: 16px;">您确定要删除该订单吗？删除后将不可恢复！</p></div>
                            <div class="modal-footer f">
                                <button type="button" class="yes" class="yes_btn">确定</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 取消订单模态框 -->
                <div class="modal fade" id="cancelModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header h">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                <h4 class="modal-title" class="myModalLabel">提示</h4>
                            </div>
                            <div class="modal-body o"><p style="font-size: 16px;">您确定要取消订单吗？取消订单后该条记录将不显示！</p></div>
                            <div class="modal-footer f">
                                <button type="button" class="yes" class="yes_btn">确定</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 消息推送模态框 -->
                <div class="modal fade" id="msgModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header h">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                <h4 class="modal-title" class="myModalLabel">提示</h4>
                            </div>
                            <div class="modal-body o"><p class="cancelMsg" style="font-size: 16px;"></p></div>
                        </div>
                    </div>
                </div>

            </div>

        </div>

    </div>

</div>

<script src="${pageContext.request.contextPath}/js/myOrder.js"></script>
<script>
    var token = localStorage.getItem("token")
    $(".wodedingdan").attr("href","/demo/getAllOrders/" + token);
</script>

</body>
</html>